<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Customer</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <script type="text/javascript" src="/lib/echarts/echarts.min.js"></script>
</head>
<body>
<div class="layuimini-container" id="app">
    <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
            <legend>在线人数表</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="" lay-filter="table-search">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">选择日期</label>
                            <div class="layui-input-inline">
                                <input type="text" name="date" id="createTime0"
                                       placeholder="开始时间" autocomplete="off" class="layui-input" />
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn">
                                <i class="layui-icon"></i>搜 索</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>
        <div id="container" style="height: calc(100vh - 200px);width:100%"></div>
    </div>
</div>
<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/js/common.js?v=5" charset="utf-8"></script>
<script>

    form = null;
    new Vue({
        el: "#app",
        data: {
            services: JSON.parse(localStorage.getItem('services')),
        },
        methods:{

        },
        updated:function(){
            form.render();
        },
        mounted: function () {
            layui.use(['form', 'table','laydate'], function () {
                form = layui.form;
                var $ = layui.jquery,
                    table = layui.table,
                    laydate=layui.laydate;
                laydate.render({
                    elem: '#createTime0',
                    value: getYmd(0)
                });

                var dom = document.getElementById('container');

                function showEcharts() {
                    var myChart = echarts.init(dom, null, {
                        renderer: 'canvas',
                        useDirtyRect: false
                    });

                    var where = form.val('table-search');
                    var option;
                    $.get("/admin/online/paginateOnlines", where, function (res) {
                        if (res.code !== 0) {
                            layer.msg(res.msg, { icon: 2 })
                            return;
                        }

                        var resData = res.data;
                        var results = res.data.results;
                        var legendData = []; // 图例数据数组
                        // 数据处理
                        var series = [];
                        // 提取所有的服务器 ID 和时间点
                        var serverIds = [...new Set(results.map(item => item.server_id))];
                        var timePoints = [...new Set(results.map(item => item.time))];
                        // 将时间字符串转换为分钟数
                        var minutes = timePoints.map(time => {
                            var [hour, minute] = time.split(':');
                            return parseInt(hour) * 60 + parseInt(minute);
                        });
                        // 找到最小时间点
                        var minTime = Math.min(...minutes);
                        // 将最小时间点转换为时间字符串
                        var minTimeStr = String(Math.floor(minTime / 60)).padStart(2, '0') + ':' + String(minTime % 60).padStart(2, '0');
                        // 获取数据中的最早时间点
                        console.log('查询时间点',timePoints)
                        console.log('查询最小时间点',minTimeStr)
                        // 查找开始时间在 resData.xAxisData 中的索引
                        var startIndex = resData.xAxisData.findIndex(time => time === minTimeStr);
                        if (startIndex > 0) {
                            // 截取开始时间之后的数据作为 x 轴的数据
                            xAxisData = resData.xAxisData.slice(startIndex);
                        } else {
                            xAxisData = resData.xAxisData;
                        }
                        xAxisData = resData.xAxisData;

                        // 构建系列数据
                        var series = serverIds.map(serverId => {
                            var data = xAxisData.map(time => {
                                var serverData = results.filter(item => item.server_id === serverId);
                                var item = serverData.find(item => item.time === time);
                                if (!item) {
                                    item = { time: time, num: null };
                                }
                                return item.num;
                            });

                            return {
                                name: serverId,
                                type: 'line',
                                data: data
                            };
                        });
                        myChart.clear();
                        option = {
                            title: {
                                text: '',
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data: legendData,
                                show: false,
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            toolbox: {
                                feature: {
                                    saveAsImage: {}
                                }
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: xAxisData,
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: series
                        };

                        if (option && typeof option === 'object') {
                            myChart.setOption(option);
                        }
                        window.addEventListener('resize', myChart.resize);
                    });
                }
                showEcharts()
                // 监听搜索操作
                form.on('submit(data-search-btn)', function () {
                    showEcharts()
                    return false;
                });


            });
        }
    })

</script>
</body>
</html>